<script setup>
import { useRouter } from "vue-router";
import { onMounted, reactive, ref } from "vue";
const router = useRouter();
</script>

<template>
  <div class="body">
    <div style="padding: 3vh 3vw">
      <div class="container">
        <div class="card" @click="router.push('assessmentTools')">
          <div class="content" style="height: 100%">
            <h2 style="padding-top: 10%">测评工具</h2>
            <li style="padding: 3% 0">筛查，诊断，工具</li>
            <li style="padding: 3% 0">技能评估</li>
            <li style="padding: 3% 0">言语 语言</li>
            <li style="padding: 3% 0">感统</li>
            <li style="margin: 3% 0">运动</li>
            <div style="width: 100%; height: 10%">
              <img src="" alt="" />
            </div>
          </div>
        </div>

        <div class="card" @click="router.push('evaluationRecord')">
          <div class="content">
            <div style="margin-top: 3vh"><h2>测评记录</h2></div>
            
          </div>
        </div>

        <div
          class="card"
          @click="router.push('rehabilitationTraining')"
        >
          <div class="content">
            <div style="margin-top: 3vh"><h2>康复训练</h2></div>
            <div style="margin: 1vh 0"><li>布置作业</li></div>
            <div style="margin: 1vh 0"><li>点评作业</li></div>
           
          </div>
        </div>
        <div class="card" @click="router.push('trainingRecords')">
          <div class="content">
            <div style="margin-top: 3vh"><h2>训练记录</h2></div>
            
          </div>
        </div>
      </div>

      <div style="display: flex; gap: 1vw; padding-top: 2vh">
        <div
          style="width: 50%; height: 40vh; background-color: #fff"
          @click="router.push('staffMgmt1')"
        >
          <div style="padding: 3vh"><h3>员工管理</h3></div>
          <div style="display: grid; grid-template-columns: repeat(2, 1fr)">
            
          </div>
        </div>

        <div
          style="background-color: #fff; width: 50%; border-radius: 1vh"
          @click="router.push('resourceLibrary')"
        >
          <div style="padding: 3vh"><h3>资源库</h3></div>
          <div style="display: grid; grid-template-columns: repeat(2, 1fr)">
            
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style  scoped>
* {
}
.body {
  min-width: 100vw;
  background-color: rgb(221, 87, 46);
  display: grid;
}
.container {
  /* border: 1px solid red; */
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* display: flex;
  justify-content: center;
  align-items: center; */
  z-index: 1;
  grid-gap: 3vw;
  width: 100%;
  height: 50vh;
}
.container .card {
  /* 相对定位 */
  position: relative;
  /* background-color: rgba(255, 255, 255, 0.1); */
  background-color: #fff;
  border-radius: 1vh;
  /* 阴影 */
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  /* 溢出隐藏 */
  overflow: hidden;

  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  /* 背景模糊 */
  backdrop-filter: blur(5px);

  display: grid;
  grid-template-columns: repeat(1, 1fr);
}
</style>